<template>
  <div>
    <!-- 当电影数据未加载完毕时显式Loading... -->
    <p v-if="films === null" class="loading">Loading...</p>

    <!-- films加载完毕时显式具体数据 -->
    <!-- <p v-else>films: {{ films }}</p> -->
    <ul v-else>

      <!-- :item="film" 将电影列表中的每个film作为数据项item注入给子组件 -->
      <FilmItem
        v-for="film in films"
        :key="film.filmId"
        :item="film"
        @click="$router.push(`/film/${film.filmId}`)"
      ></FilmItem>

    </ul>
  </div>
</template>

<script>
// 引入封装好的axios应用层方法
import { getPlayings } from "../../api/movieApi";

// 引入FilmItem子组件
import FilmItem from "./FilmItem.vue";

/* 对外导出组件实例 */
export default {
  /* 注册子组件 */
  components: {
    FilmItem,
  },

  /* 组件数据闭包 */
  data() {
    return {
      // 要展示的电影数据
      films: null,
    };
  },

  /* 在组件被挂载时获取数据 */
  mounted() {
    // getPlayings的返回值是Promise对象
    getPlayings(1).then(
      // 拿到Promise履约电影列表数据 赋值给当前组件实例this的films
      (films) => (this.films = films)
    );
  },
};
</script>

<style lang="scss" scoped>
.loading {
  background-color: #ddd;
  text-align: center;
}
</style>
